<template>
    <div :class='$style.container'>
        <div :class='$style.avatar'>
            <a-avatar :class='$style.avatar' :size='60' :src='avatar'></a-avatar>
            <div class='text-center m-t-5'>{{$store.state.userInfo && $store.state.userInfo.username ? $store.state.userInfo.username : 'Hi~'}}</div>
        </div>
        <a-divider />
        <div class='p-l'>
            <router-link class='color-333 block' to='/account'>账号设置</router-link>
        </div>
        <a-divider />
        <div class='p-l'>
            <router-link class='color-333 block' to='/account?target=msg'>消息</router-link>
        </div>
        <a-divider />
    </div>
</template>

<script lang='ts' setup>
import { computed } from "vue"
import { useStore } from "vuex"

    const $store = useStore()

    const avatar = computed(() => {
        return $store.state.userInfo && $store.state.userInfo.head_portrait ?
        $store.state.userInfo.head_portrait : 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'
    })
</script>


<style scoped lang='scss' module>
    .container{
        box-shadow: 1px 1px 5px 1px rgb(235, 235, 235);
        //border: 1px solid $border-color;
        width: 180px;
        padding: 20px 0;

        .avatar{
            text-align: center;
        }
    }
</style>